<script setup>
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from 'vue';

    onBeforeMount(() => {
        console.log('------------------------onBeforeMount----------------------')
        console.log(document.getElementById("s1"))
    })

    onMounted(() => {
        console.log('------------------------onMounted----------------------')
        console.log(document.getElementById("s1"))
    })

    onBeforeUpdate(() => {
        console.log('------------------------onBeforeUpdate----------------------')
        console.log(document.getElementById("s1").innerText)
    })

    onUpdated(() => {
        console.log('------------------------onUpdated----------------------')
        console.log(document.getElementById("s1").innerText)
    })

    let message = ref(1)
</script>

<template>
    <div>
        <span id="s1" v-text="message"></span>
        <button @click="message++">updateMessage</button>
    </div>
</template>
  

<style scoped>

</style>
